<template functional>
  <a-menu-item :key="props.menu.id" :value="props.menu" class="low-app-menu-item">
    <router-link :to="{path: props.menu.routerLink}">
      <a-icon v-if="props.menu.iconType" :type="props.menu.iconType"/>
      {{props.menu.menuName}}
    </router-link>
    <!-- 子菜单右侧的setting图标 o2ulDNOXGwvBRndehxW14dML+i/qxuVry2u3TXIhR9CrYEbhZi7RywQnYojV/SgC/PffdTE3WKU0/u0CXtgFzw== -->
    <div v-if="props.devMode" class="low-app-menu-setting">
      <a-dropdown :trigger="['click']">
        <a-icon type="setting" @click.stop="e => e.preventDefault()"/>
        <a-menu slot="overlay" @click="e=>listeners.settingMenuClick(e,props.menu)">
          <a-menu-item key="edit">编辑</a-menu-item>
          <a-menu-divider/>
          <a-menu-item key="move-group">移动到...</a-menu-item>
          <a-menu-item key="order-to-up">向上移</a-menu-item>
          <a-menu-item key="order-to-down">向下移</a-menu-item>
          <a-menu-divider/>
          <a-menu-item key="delete"><span style="color: red;">删除</span></a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </a-menu-item>
</template>

<script>
export default {
  name: 'LowAppMenuItem',
  props: {
    menu: Object,
    devMode: Boolean,
  },
}
</script>

<style scoped>

</style>
